<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#box{
			width: 1000px;
			height: 164px;
			margin: 150px auto;
			overflow:hidden;
			position: relative;
		}
		.uu{
			width: 8000px;
			height: 164px;
			position: absolute;
			left: 0px;
			top: 0px;
		}
		li{
			float: left;
			display: inline-block;
		}
		img{
			width: 249px;
			border-right: 1px solid white;
			float: left;
		}
		.cmbt{
			width: 28px;
			height: 62px;
			background: black;
			opacity: 0.2;
			fillter:alpha(opacity=20);
			font-size: 24px;
			color: white;
			display: none;
		}
		#btn{
			position: absolute;
			left: 0px;
			top: 50px;
		}
		#btn1{
			position: absolute;
			right: 0px;
			top: 50px;
		}
		</style>
		<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
		<script type="text/javascript">
		$(function(){
			//添加鼠标移入事件
			$('#box').hover(function() {
				//鼠标移入地时候让按钮显现
				$('.cmbt').css('display','block');
			}, function() {
				//鼠标移出的时候让按钮隐藏
				$('.cmbt').css('display','none');
			});
			//给右边按钮添加单击事件
			var n=0;
			$('#btn1').click(function() {
				n++;
				if(n>4){
					//当转到第5张图片时把他的left值设为0px;
					$('.uu').css({left:"0px"});
					n=1;	
				}
				//每点击一次，ul的left值变小一个长度单位，计算ul的值
				var left=n*-440;
				document.title=left;
				//把新值赋值给ul
				$('.uu').stop().animate({'left':left+'px'},1000);
			});
			//给左边按钮加单击事件
			$('#btn').click(function() {
				n--;
				if(n<0){
					//当在第一张图片下点击时，把他的left值变为最小；
					$('.uu').css({left:'-1760px'})
					n=3;
				}
				//每点击一次，ul的left值变大一个长度单位
				var left=-n*440;
				document.title=left;
				$('.uu').stop().animate({'left':left+'px'},1000);
			});

		})
		</script>
	</head>
	<body>
		<div id="box">
			<ul class="uu">
				<li class="one">
					<img src="images/55f8dbabNc3412742.jpg" alt="">
					<img src="images/55f12cbbN7827ee08.jpg" alt="">
					<img src="images/55f9496bNe89a542e.jpg" alt="">
					<img src="images/55fa3af9Nae14f2fa.jpg" alt="">
				</li>
				<li class="one">
					<img src="images/55fa8ac5Nf87b426a.jpg" alt="">
					<img src="images/55fb62bbNc89ee679.jpg" alt="">
					<img src="images/55fb84e0N35f6b03a.jpg" alt="">
					<img src="images/55fb87e1Nab884189.jpg" alt="">
				</li>
				<li class="one">
					<img src="images/55fb8118N647f434d.jpg" alt="">
					<img src="images/55fb8757N357149e7.jpg" alt="">
					<img src="images/55fbaebfN0eceb3f5.jpg" alt="">
					<img src="images/55fbd9e5N177147c4.jpg" alt="">
				</li>
				<li class="one">
					<img src="images/55ff6e75N8cf1f257.jpg" alt="">
					<img src="images/55ff7072Ne7dfcd84.jpg" alt="">
					<img src="images/55ffd3b3N486074ea.jpg" alt="">
					<img src="images/5600f361N35a42e7c.jpg" alt="">
				</li>
				<li class="one">
					<img src="images/55f8dbabNc3412742.jpg" alt="">
					<img src="images/55f12cbbN7827ee08.jpg" alt="">
					<img src="images/55f9496bNe89a542e.jpg" alt="">
					<img src="images/55fa3af9Nae14f2fa.jpg" alt="">
				</li>
			</ul>
			<input type="button" id="btn" class="cmbt" value="<">
			<input type="button" id="btn1" class="cmbt" value=">">
		</div>
	</body>
</html>
